<template>
  <div class="permissionPage">
    <div
      id="main"
      style="
        width: 90%;
        height: 400px;
        border: 1px solid pink;
        background: #183656;
      "
    ></div>

    <el-table
      :data="
        JSON.parse(JSON.stringify(roleList)).filter(
          (el) =>
            !search || el.label.toLowerCase().includes(search.toLowerCase())
        )
      "
      class="elTable"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="id" align="center" sortable width="70">
        <template #defauilt="{ row }">
          {{ row.id ? row.id : '-' }}
        </template>
      </el-table-column>

      <el-table-column prop="label" label="名称" align="center" sortable>
        <template #defauilt="{ row }">
          {{ row.label ? row.label : '-' }}
        </template>
      </el-table-column>

      <!-- key -->
      <el-table-column prop="key" label="key标识" align="center" sortable>
        <template v-slot="{ row }">
          {{ row.key ? row.key : '' }}
        </template>
      </el-table-column>

      <!-- 建立日期 -->
      <el-table-column
        prop="createTime"
        label="建立日期"
        align="center"
        sortable
        min-width="90"
      >
        <template #defauilt="{ row }">
          {{ row.createTime ? row.createTime : '-' }}
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column align="center" min-width="100">
        <template slot="header">
          <el-input
            class="inputs"
            v-model="search"
            size="mini"
            placeholder="输入姓名搜索"
            clearable
            @clear="search = ''"
          >
          </el-input>
        </template>

        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="permEdit(scope.$index, scope.row, 'edit')"
          >
            <!-- :disabled=" ['0', '1', '2', '3'].includes(scope.row.id) ? true :
            false " -->
            权限分配
          </el-button>

          <!-- <el-button
            size="mini"
            :disabled="
              ['0', '1', '2', '3'].includes(scope.row.id) ? true : false
            "
            @click="handleEdit(scope.$index, scope.row, 'edit')"
          >
            编辑
          </el-button> -->

          <!-- <el-button
            size="mini"
            type="danger"
            :disabled="
              ['0', '1', '2', '3'].includes(scope.row.id) ? true : false
            "
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="权限分配"
      :before-close="closePerm"
      :visible.sync="visible"
      center
      width="600"
    >
      <el-checkbox-group v-model="checked">
        <el-checkbox v-for="(iv, i) in cities" :label="iv" :key="i">
          {{ iv }}
        </el-checkbox>
      </el-checkbox-group>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'
import roleInfo from '../role/role'

export default {
  name: 'permission',
  components: {},
  props: {},
  data() {
    return {
      search: '',
      visible: false,

      checked: [],

      i: '',
      row: {},

      routerMsg: [],
    }
  },
  computed: {
    ...mapState(['user', 'menu']),

    roleList() {
      const lists =
        this.user?.roleList?.length > 0 ? this.user?.roleList : roleInfo
      return lists
    },

    cities() {
      return this.menu.getMenuData
    },
  },
  watch: {
    search: {
      handler(newValue, old) {
        // console.log('newValue, old', newValue, old)
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.initEchart()
  },
  methods: {
    initEchart() {
      const initEcharts = echarts.init(document.getElementById('main'))

      // legend
      const XArr = ['新开', '移机', '故障', '超级wifi组网'],
        warnValue = 100
      let str1 = '已交付'
      let str2 = '待交付'
      let maxData = [60, 60, 60, 60, 60],
        maxValue = 60
      // 第一条数据
      let data1 = [125, 112, 113, 112]
      let oneData = data1.map((item) => {
        return maxValue - item
      })
      console.log('oneData', oneData)
      // 第二条数据
      let data2 = [236, 332, 234, 332]
      let twoData = data2.map((item) => {
        return maxValue - item
      })
      console.log('twoData', twoData)
      // 黄色
      const colors = [
        {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#EED743',
            },
            {
              offset: 0.5,
              color: '#D6B628',
            },
            {
              offset: 0.5,
              color: '#B59819',
            },
            {
              offset: 1,
              color: '#DABB35',
            },
          ],
        },
      ]
      // 蓝色
      const colorsPlan = [
        {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#68F4EF',
            },
            {
              offset: 0.5,
              color: '#37D6E5',
            },
            {
              offset: 0.5,
              color: '#19A5B5',
            },
            {
              offset: 1,
              color: '#35C2DA',
            },
          ],
        },
      ]
      //透明背景柱子颜色
      const colorsBg = [
        {
          type: 'linear',
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(255,255,255,.12)',
            },
            {
              offset: 0.5,
              color: 'rgba(255,255,255,.4)',
            },
            {
              offset: 0.5,
              color: 'rgba(255,255,255,.12)',
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,.4)',
            },
          ],
        },
      ]
      //透明背景柱子顶部颜色
      const colorsTopBg = '#252f31'
      let barWidth = 26,
        labelXPosition = 1,
        symbolSizeTop = 8,
        symbolOffsetX = 16
      const options = {
        title: {
          text: '单位：个',
          padding: [15, 0, 20, 30],
          textStyle: {
            color: '#70CCFF',
            fontWeight: 'normal',
            fontSize: '14',
          },
        },
        grid: {
          top: 80,
          left: 30,
          right: 30,
          bottom: 15,
          containLabel: true,
        },
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            crossStyle: {
              color: '#999',
            },
          },
          valueFormatter: function (value) {
            return value + '个'
          },
        },
        legend: {
          // icon: 'rect',
          data: [str1, str2],
          show: true,
          right: '50',
          selectedMode: false,
          //图例组件，颜色和名字
          top: 15,
          itemGap: 15,
          itemWidth: 16,
          itemHeight: 8,
          textStyle: {
            color: 'rgba(255,255,255,0.74)',
            fontStyle: 'normal',
            fontSize: 12,
          },
        },
        xAxis: {
          type: 'category',
          data: XArr,
          axisLine: {
            //坐标轴线颜色
            lineStyle: {
              color: '#626361',
            },
          },
          splitNumber: 4,
          interval: 4,
          boundaryGap: ['8%', '8%'],
          axisLabel: {
            color: 'rgba(255,255,255,.9)', //坐标的字体颜色
            fontSize: 12,
          },
          axisTick: {
            //坐标轴刻度颜色
            show: false,
          },
        },
        yAxis: {
          min: 0,
          type: 'value',
          //设置网格线颜色
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.3)',
              type: [3, 3],
              dashOffset: 2,
              width: 1,
            },
          },
          axisTick: {
            //坐标轴刻度颜色
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: 'rgba(255,255,255,.9)', //坐标的字体颜色
            fontSize: 12,
          },
        },
        series: [
          // 第一条数据进度柱子
          {
            name: str1,
            type: 'bar',
            barWidth: barWidth,
            showBackground: true,
            stack: '1',
            itemStyle: {
              color: colorsPlan[0],
              borderRadius: 0,
            },
            // itemStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(7, 221, 250, 1)',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(7, 221, 250, 0.1)',
            //     },
            //   ]),
            // },
            label: {
              show: true,
              position: [labelXPosition, -20],
              color: '#00f8ff', //蓝色
              fontSize: 12,
            },
            data: data1,
          },
          // 第一条数据上面正方形：颜色
          {
            name: str1,

            type: 'pictorialBar',
            symbol: 'diamond',
            symbolSize: [barWidth, symbolSizeTop],
            symbolOffset: [-symbolOffsetX, -symbolSizeTop / 2],
            symbolPosition: 'end',
            z: 12,
            color: '#37DAE5',
            data: data1,
          },
          //  第一条数据底部正方形：颜色
          // {
          //   type: 'pictorialBar',
          //   symbol: 'diamond',
          //   symbolSize: [barWidth, symbolSizeTop],
          //   symbolOffset: [-symbolOffsetX, symbolSizeTop / 2],
          //   z: 12,
          //   color: colorsPlan[0],
          //   data: data1,
          // },
          // 第一条数据上部正方形:透明背景
          // {
          //   data: maxData,
          //   type: 'pictorialBar',
          //   symbol: 'diamond',
          //   symbolSize: [barWidth, symbolSizeTop],
          //   symbolOffset: [-symbolOffsetX, -symbolSizeTop / 2],
          //   color: colorsTopBg,
          //   symbolPosition: 'end',
          // },
          // 第一条数据底部柱子:透明背景
          // {
          //   data: oneData,
          //   type: 'bar',
          //   barWidth: barWidth,
          //   stack: '1',
          //   zlevel: -1,
          //   itemStyle: {
          //     opacity: 0.7,
          //     color: colorsBg[0],
          //     borderRadius: 0,
          //   },
          // },
          // 第二条数据进度柱子
          {
            showBackground: true,
            backgroundStyle: {
              // color: 'rgba(333, 333, 0, 0.2)', // 柱条的颜色
              // borderColor: 'red', // 柱条的描边颜色
              // borderWidth: 2, // 柱条的描边宽度，默认不描
            },
            name: str2,
            type: 'bar',
            stack: '2',
            barWidth: barWidth,
            itemStyle: {
              color: colors[0],
            },
            // itemStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: '#FFD15C',
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(255, 209, 92, 0.1)',
            //     },
            //   ]),
            // },
            label: {
              show: true,
              position: [labelXPosition, -20],
              color: '#E9CB35', //黄色
              fontSize: 12,
            },
            data: data2,
          },
          // 第二条数据中间正方形:颜色
          {
            name: str2,
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolSize: [barWidth, symbolSizeTop],
            symbolOffset: [symbolOffsetX, -symbolSizeTop / 2],
            symbolPosition: 'end',
            z: 12,
            color: '#E5CD37',
            data: data2,
          },
          // 第二条数据底部正方形
          // {
          //   name: '',
          //   type: 'pictorialBar',
          //   symbol: 'diamond',
          //   symbolSize: [barWidth, symbolSizeTop],
          //   symbolOffset: [symbolOffsetX, symbolSizeTop / 2],
          //   color: colors[0],
          //   z: 12,
          //   data: data2,
          // },
          // // 第二条数据上部正方形:透明背景
          // {
          //   data: maxData,
          //   type: 'pictorialBar',
          //   symbol: 'diamond',
          //   symbolSize: [barWidth, symbolSizeTop],
          //   symbolOffset: [symbolOffsetX, -symbolSizeTop / 2],
          //   color: colorsTopBg,
          //   symbolPosition: 'end',
          // },
          // 第二条数据底部柱子:透明背景
          // {
          //   data: twoData,
          //   type: 'bar',
          //   barWidth: barWidth,
          //   stack: '2',
          //   zlevel: -1,
          //   itemStyle: {
          //     opacity: 0.5,
          //     color: colorsBg[0],
          //     borderRadius: 0,
          //   },
          // },
          // {
          //   // 临界值-超标线
          //   name: str1,
          //   markLine: {
          //     silent: true,
          //     symbol: false,
          //     label: {
          //       fontSize: 12,
          //       position: 'insideEndTop',
          //       fontWeight: 200,
          //       color: '#FF5757',
          //     },
          //     data: [
          //       {
          //         yAxis: warnValue,
          //         lineStyle: {
          //           color: '#FF5757',
          //           type: [3, 3],
          //           dashOffset: 2,
          //           width: 1,
          //         },
          //       },
          //     ],
          //   },
          //   type: 'line',
          //   smooth: true,
          //   animationDuration: 2000,
          // },
          // {
          //   // 临界值-超标线
          //   name: str2,
          //   markLine: {
          //     silent: true,
          //     symbol: false,
          //     label: {
          //       fontSize: 12,
          //       position: 'insideEndTop',
          //       fontWeight: 200,
          //       color: '#FF5757',
          //     },
          //     data: [
          //       {
          //         yAxis: warnValue,
          //         lineStyle: {
          //           color: '#FF5757',
          //           type: [3, 3],
          //           dashOffset: 2,
          //           width: 1,
          //         },
          //       },
          //     ],
          //   },
          //   type: 'line',
          //   smooth: true,
          //   animationDuration: 2000,
          // },
        ],
      }
      options && initEcharts.setOption(options)
    },

    permEdit(index, row) {
      this.i = index
      this.row = row
      this.checked = row.checked
      this.visible = true
    },

    closePerm() {
      this.i = ''
      this.row = {}
      this.checked = []
      this.visible = false
    },

    onSubmit() {
      this.$set(this.roleList[this.i], 'checked', this.checked)
      console.log('this.roleList', this.roleList)

      this.$store.commit('setRoleList', this.roleList)

      this.closePerm()
    },

    // handleChecked(e) {
    //   console.log('e', e)
    // },
  },
}
</script>

<style lang="scss">
.permissionPage {
  height: 100%;
  margin: 16px;
  .elTable {
    width: 100%;
    border-radius: 6px;
    margin-top: 15px;
  }
}

.el-popover {
  min-width: 100px;
}

:deep(.el-popover) {
  min-width: 100px;
}

.inputs {
  width: 60%;
}
</style>
